<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/common::head(~{::title})}">
    <title>分类</title>
</head>
<body>
<!--导航栏 menu-->
<div th:replace="~{commons/common::menu(activeUrl = 'types.html')}"></div>

<!--中间部分-->
<div class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <!--header-->
        <div class="ui top middle aligned attached segment">
            <div class="ui  two column grid">
                <div class="column">
                    <h3 class="ui blue header">分类</h3>
                </div>
                <div class="right aligned column">
                    共 <h2 class="ui teal header m-inline-block m-text-thin" th:text="${types.size()}">20</h2> 个
                </div>
            </div>
        </div>

        <!--分类标签-->
        <div class="ui bottom attached segment m-padded-tb-big">
            <!--激活-->
            <a th:each="type : ${types}" th:href="@{/category/} + ${type.id}"
               class="ui labeled button m-margin-tb-small m-margin-lr-tiny">
                <div class="ui button" th:text="${type.name}"
                     th:classappend="${activeTypeId == type.id} ? 'green'"> Java
                </div>
                <div class="ui left pointing basic label" th:text="${#arrays.length(type.blogs)}">20</div>
            </a>
        </div>

        <!--分类后展示的博客-->
        <div class="ui blue top attached segment">
            <!--一篇博客摘要-->
            <div class="ui padded vertical segment m-padded-tb-big m-mobile-lr-clear"
                 th:each="indexBlog : ${pageInfo.list}">
                <div class="ui mobile reversed stackable grid">
                    <!--展示博客的简要内容-->
                    <div class="eleven wide column">
                        <h3 class="ui header">
                            <a class="m-font-color" th:href="@{/article/} + ${indexBlog.id}"
                               th:text="${indexBlog.title}">1.单例模式简介</a>
                        </h3>
                        <p class="m-text" th:text="${indexBlog.description}">
                            饿汉式是最简单的单例模式的写法，保证了线程的安全，执行效率高，但不能延时加载。
                            但饿汉式也存在一些问题，比如，在单例中要创建大量的数据。
                        </p>

                        <div class="ui stackable grid">
                            <!--头像、作者、日期信息-->
                            <div class="ui eleven wide column">
                                <!--小头像-->
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img src="https://picsum.photos/id/1/100/100" alt=""
                                             class="ui avatar image">
                                        <div class="content">
                                            <a class="header" th:text="${indexBlog.nickname}">孙忠杰</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i> <span
                                            th:text="${#dates.format(indexBlog.createTime, 'yyyy-MM-dd HH:mm')}">2020-03-04</span>
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i> <span th:text="${indexBlog.views}">6666</span>
                                    </div>
                                </div>
                            </div>
                            <!--标签-->
                            <div class="ui right aligned five wide column">
                                <a th:href="@{/category/} + ${indexBlog.id}" target="_self"
                                   class="ui blue basic label m-padded-tiny"
                                   th:text="${indexBlog.type.name}">设计模式</a>
                            </div>
                        </div>
                    </div>

                    <!--博客图片-->
                    <div class="five wide column">
                        <a href="" target="_blank">
                            <img th:src="@{${indexBlog.firstPicture}}" alt="" class="ui rounded image">
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <!--翻页按钮-->
        <div class="ui bottom attached segment">
            <div class="ui two column grid">
                <div class="right aligned column">
                    <a th:href="@{/category.html(pageNum=${pageInfo.hasPreviousPage} ? ${pageInfo.prePage} : 1)}"
                       class="mini ui blue basic button">Prev</a>
                </div>

                <div class="left aligned column">
                    <a th:href="@{/category.html(pageNum=${pageInfo.hasNextPage} ? ${pageInfo.nextPage} : ${pageInfo.pages})}"
                       class="mini ui blue basic button">Next</a>
                </div>
            </div>
        </div>

    </div>
</div>

<br>

<!--底部 footer-->
<div th:replace="~{commons/common::footer}"></div>


<!-- 引用的 js-->
<th:block th:replace="~{commons/common::script}">
</th:block>

<script>
    // 在手机端点击汉堡按钮，重新显示隐藏的导航栏内容
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hidden');
    });


    // 搜索框弹出消息
    $('.m-popup input').popup({
        on: 'focus',
        position: 'bottom center'
    });

</script>
</body>
</html>